<template lang="html">
    <div class="course">
        <div v-for="(item,index) in CousrseData">
            <img :src="item.pic"/>
            <h3>{{ item.title }}</h3>
            <p class="kcal">{{ item.times }} &nbsp; 燃脂{{ item.cost }}/千卡</p>
            <p>L{{ item.level }} {{ item.body }}</p>
        </div>
    </div>
</template>

<script>
export default {
    name:"courseHttp",
    data(){
        return{
             CousrseData:[]
        }
    },
    mounted () {
        this.$axios.get(this.HOST +"http://localhost:3000/burning/classes")
        .then(res => {
            this.CousrseData = res.data.classes
        })
        .catch(error => {
            console.log(error)
        })
    }


}
</script>

<style lang="less">
.course{
    width: 100%;
    background: white;
    div{
        width: 90%;
        position: relative;
        img{
            width: 100%;
            margin: 0 5% 5px 5%;
        }
        h3{
            font-size: 0.4rem;
            color: #fff;
            position: absolute;
            font-weight: normal;
            top: 0.4rem;
            left: 0.7rem;
        }
        .kcal{
            font-size: 0.3rem;
            color: #fff;
            position: absolute;
            left: 0.7rem;
            top: 1.2rem;
        }
        p{
            font-size: 0.3rem;
            color: #fff;
            position: absolute;
            left: 0.7rem;
            top: 2rem;
        }
    }
}

</style>
